<template>
  <div class="component-name">
    父组件
    <router-link to="/fatherpath/brotherpath" class="item" active-class="active">路由跳转(去兄组件)</router-link><br />
    <router-link to="/fatherpath/childpath" class="item" active-class="active">路由跳转(去子组件)</router-link><br />
    <keep-alive :include="['Child-Page', 'Brother-Page']"> <!--只缓存Child.vue,Brother.vue输入框数据,组件名:不写就缓存全部呈现的-->
      <router-view></router-view> <!--视图呈现(嵌套路由)-->
    </keep-alive>
    <button @click="pushShow(m)">编程式路由</button> <!--编程式路由-->
  </div>
</template>

<script>
export default {
  name: 'component-name',
  components: { //注册组件

  },
  props: { //props传递数据

  },
  data() {
    return { //数据
      m: { id: 2, title: '幸运' }
    }
  },
  computed: { //计算属性

  },
  watch: { //监听器

  },
  methods: { //方法
    pushShow(m) { //push编程式路由：不用<router-link>
      localStorage.setItem('school', 'qinghua')
      this.$router.push({
        name: 'uncle',
        query: { id: m.id, title: m.title }
      })
    },
    replaceShow(m) { //replace编程式路由：不用<router-link>
      this.$router.replace({
        name: 'uncle',
        query: { id: m.id, title: m.title }
      })
    },
    back() {
      this.$router.back() //前进
    },
    forward() {
      this.$router.forward() //后退
    },
    go() {
      this.$router.go(-3) //负3后退3步,正3前进3步
    }
  },
  mounted() { //挂载完成(生命周期,钩子函数)

  },
  beforeDestroy() { //将要销毁(生命周期,钩子函数)

  },
  beforeRouteEnter(to, from, next) { //进入守卫:通过路由规则,进入组件时调用
    if (to.meta.isAuth || to.name === 'xinwen' || to.path === '/home/message') {
      if (localStorage.getItem('school') === 'qinghua') {
        next()
      } else {
        alert('学校名不对,无权限查看!')
      }
    } else {
      next() //放行
    }
  },
  beforeRouteLeave(to, from, next) { //离开守卫:通过路由规则,离开组件时调用
    next() //放行
  }
}
</script>

<style lang="less" scoped>
.component-name {}
</style>